<template>
    <div class="P-lsit">
       <list :data="orders" :name="name"></list>
    </div>
</template>

<script>
import list from "@/components/list";
import ordercard from "@/components/cards/card-order";
export default {
    data: function () {
        return {
            orders: [
                {
                    id: 1,
                    shop_name: '天猫旗舰店',
                    name: '儿童牙刷U型牙刷可爱樱花粉[2-6]岁',
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 12.5,
                    status: 2
                },
                {
                    id: 2,
                    shop_name: '天猫旗舰店',
                    name: '儿童牙刷U型牙刷可爱樱花粉[2-6]岁',
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 22.5,
                    status: 1
                },
                {
                    id: 3,
                    shop_name: '天猫旗舰店',
                    name: '儿童牙刷U型牙刷可爱樱花粉[2-6]岁',
                    desc: "儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁儿童牙刷U型牙刷可爱樱花粉[2-6]岁",
                    price: 32.5,
                    status: 0
                }
            ],
            name: ordercard
        };
    },
    components: {
        list
    },
    methods: {
        showTip() {
            this.toggleTpast(true);
            setTimeout(() => {
                this.toggleToast(false);
            }, 2000);
        },
        toggleToast(bool) {
            this.showToast = !this.showToast;
        },
    },
    mounted(){
        console.log(this.$route);
    }
};
</script>

<style lang="less">
// less 的引入路径中带上 ~@ 就代表根目录了，aixy会自动解析的，有点坑啊，为什么没有和小程序统一标准？
@import "../../components/common/var.less";

.P-index {
    width: 100%;
    height: 100%;
    .t {
        text-align: center;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .cell {
            flex: 1;
            font-size: 28px;
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            .btn();
        }
    }

    .theme {
        margin-top: 20px;
        justify-content: center;
        button:first-of-type {
            margin-right: 20px;
        }
    }

    .tip {
        background: #efefef;
        color: #414141;
        font-size: 28px;
        padding: 20px;
        border-radius: 10px;
        line-height: 1.6em;
        margin: 20px 10px 0;
    }

    .pic {
        display: flex;
        align-items: center;
        justify-content: space-around;
        image,
        view {
            width: 100px;
            height: 100px;
            border: 10px solid @btnColor;
            border-radius: 10px;
        }
        .view {
            background: url("./_src/ali.jpg") scroll no-repeat center center
                transparent;
        }
    }
}
</style>